const path = require("path");
const { argv } = require("process");
const { merge } = require("webpack-merge");

const baseConfig = {
  entry: "./src/utils/register-wc.js",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        oneOf: [
          {
            resourceQuery: /inline/,
            use: [
              {
                loader: "css-loader",
                options: {
                  exportType: "string",
                },
              },
            ],
          },
          {
            use: [/*'style-loader',*/ "css-loader"],
          },
        ],
      },
      {
        test: /\.less$/,
        oneOf: [
          {
            resourceQuery: /inline/,
            use: [
              {
                loader: "css-loader",
                options: {
                  exportType: "string",
                },
              },
              "less-loader",
            ],
          },
          {
            use: [
              // 'style-loader',
              "css-loader",
              "less-loader",
            ],
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};

const createFormatConfig = (isProduction, format, filename, libraryOptions) =>
  merge(baseConfig, {
    mode: isProduction ? 'production' : 'development',
    devtool: isProduction ? 'source-map' : 'eval-source-map',
    output: {
      path: path.resolve(__dirname, "dist"),
      filename,
      ...libraryOptions,
    },
    experiments:
      format === "esm"
        ? {
            outputModule: true, // 启用 ES Module 输出
          }
        : {},
    externals:
      // 全局版本通常需要打包所有依赖,不需要 external 依赖
      format === "global"
        ? {}
        : format === "umd"
        ? {
            react: {
              commonjs: "React",
              commonjs2: "React",
              amd: "React",
              root: "React",
            },
            "react-dom": {
              commonjs: "ReactDOM",
              commonjs2: "ReactDOM",
              amd: "ReactDOM",
              root: "ReactDOM",
            },
            "react-dom/client": {
              commonjs: "ReactDOM",
              commonjs2: "ReactDOM",
              amd: "ReactDOM",
              root: "ReactDOM",
            },
          }
        : {
            react: "React",
            "react-dom": "ReactDOM",
            "react-dom/client": "ReactDOM",
          },
  });

module.exports = (env, argv) => {
  const isProduction = argv.mode === "production";
  return [
    // ES Module
    createFormatConfig(isProduction, "esm", "react-web-components.esm.js", {
      library: { type: "module" },
      module: true,
    }),
    // UMD
    createFormatConfig(isProduction, "umd", "react-web-components.umd.js", {
      library: {
        name: "ReactWebComponents",
        type: "umd",
      },
      globalObject: "this",
    }),
    // CommonJS
    createFormatConfig(isProduction, "cjs", "react-web-components.cjs.js", {
      library: { type: "commonjs2" },
    }),
    // Global
    createFormatConfig(isProduction, "global", "react-web-components.global.js", {
      library: {
        name: "ReactWebComponents",
        type: "var",
      },
    }),
  ]
}
